<template>
  <div class="hao123-outer">
    <div class="panel-outer">
      <Card v-for="(list, i) in linkList" :key="i" style="margin-bottom: 16px">
        <div slot="title">
          <Icon type="ios-link"></Icon>
          {{ i }}
        </div>
        <div slot="extra">
          <Icon type="md-menu"></Icon>
          Info
        </div>
        <div class="link-bar">
          <div v-for="item in list" :key="item.name" style="display: flex">
            <div class="img-outer">
              <img :src="'./assets/image/' + item.icon" />
            </div>
            <a :href="item.link" target="_blank">{{ item.name }}</a>
          </div>
        </div>
      </Card>
    </div>
  </div>
</template>

<script>
import linkList from './common/linkList.json';

export default {
  name: 'Hao123',
  data() {
    return {
      linkList: linkList,
    };
  },
  // props: {
  //   linkList: {
  //     type: Object,
  //   },
  // },
};
</script>

<style scoped>
.panel-outer {
  padding: 20px;
}

.hao123-outer ::v-deep .ivu-card-head {
  padding: 8px 16px;
  height: 40px;
  line-height: 24px;
}
.hao123-outer ::v-deep .ivu-card-extra {
  top: 8px;
}

.link-bar {
  display: flex;
  flex-wrap: wrap;
}
.link-bar a {
  font-size: 16px;
  margin-right: 16px;
}

.img-outer {
  padding: 4px;
  height: 24px;
}
.img-outer img {
  width: 16px;
  height: 16px;
}
</style>
